<template>
  <div class="home-search">
    <div class="search-top">
      <van-icon name="arrow-left"
                @click="$router.go(-1)"
                v-show="isSearch" />
      <van-search v-model="searchKey"
                  shape="round"
                  background="transparent"
                  @search="search"
                  @clear="isSearch = false"
                  placeholder="寻找更多优质商品">
      </van-search>
      <span v-show="!isSearch"
            @click="$router.go(-1)">取消</span>
    </div>
    <!-- 搜索历史 -->
    <div class="search-history"
         v-show="!isSearch">
      <div class="history-title">
        <span>热门搜索</span>
        <span>换一换</span>
      </div>
      <div class="history-item">
        <span>绝世好酒</span>
        <span>五粮液</span>
        <span>扳倒井111</span>
        <span>扳倒井</span>
        <span>扳倒井</span>
        <span>绝世好酒</span>
        <span>五粮液</span>
        <span>扳倒井</span>
      </div>
      <div class="history-title">
        <span>历史搜索</span>
        <van-icon name="delete-o" />
      </div>
      <div class="history-item">
        <span>绝世好酒</span>
        <span>五粮液</span>
        <span>扳倒井</span>
        <span>绝世好酒</span>
        <span>五粮液</span>
        <span>扳倒井</span>
      </div>
    </div>

    <!-- 排序组件 -->
    <sort-table class="sort-table"
                v-if="isSearch"
                :order-sort="orderSort"
                :key="timer"
                @sort-handler="sortHandler">
    </sort-table>
    <!-- 搜索后展示界面 -->
    <div class="search-result"
         v-if="isSearch">
      <!-- 结果为空 -->
      <empty v-if="isEmpty"
             text="暂无您想要的商品~"></empty>
      <!-- 商品列表 -->
      <div v-if="!isEmpty&&!shopShow">
        <good-card v-for="item in 3"
                   :key="item"></good-card>
      </div>
      <!-- 店铺列表 -->
      <div v-if="!isEmpty&&shopShow"
           class="shop-result">
        <div class="shop-card"
             v-for="item in 2"
             :key="item">
          <div class="shop-top">
            <div class="top-left">
              <img :src="require('@/assets/image/default_img.png')"
                   alt="">
              <li>
                <span>美的旗舰店</span>
                <span>4.6万粉丝</span>
                <span>好评率
                  <van-rate v-model="rateCount"
                            size="0.16rem"
                            color="#FE4C0C"
                            readonly />
                </span>
              </li>

            </div>
            <li class="top-right">
              <span>进入店铺</span>
              <span>＋关注</span>
            </li>
          </div>
          <div class="shop-bottom">
            <good-show-card v-for="item in 3"
                            :key="item"></good-show-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import GoodCard from '@/components/GoodCard'
import SortTable from '@/components/SortTable'
import GoodShowCard from '@/components/GoodShowCard'
import Empty from '@/components/Empty'
export default {
  data () {
    return {
      searchKey: '',
      isSearch: false, // 是否已经搜索
      rateCount: 4, // 评分
      isEmpty: false, // 结果是否为空
      shopShow: false, // 是否展示店铺
      timer: '',
      orderSort: [
        {
          name: '综合',
          bool: true,
          sort: false,
          tab: 'default',
        },
        {
          name: '销量',
          bool: true,
          sort: true,
          tab: 'sale',
        },
        {
          name: '价格',
          bool: true,
          sort: true,
          tab: 'price',
        },
        {
          name: '店铺',
          tab: 'shop',
        }
      ],
    };
  },
  components: {
    GoodCard,
    SortTable,
    GoodShowCard,
    Empty
  },
  watch: {
    searchKey (val) {
      if (!val) {
        this.isSearch = false
      }
    }
  },
  created () { },
  methods: {
    handleLoad () {
      this.timer = new Date().getTime()
    },
    search () {
      this.isSearch = true
      this.handleLoad()
    },
    /**
     * @description: 排序组件返回对象
     * @param {*} item 排序对象
    */
    sortHandler (item) {
      if (item.sortTab == 'shop') {
        this.shopShow = true
      } else {
        this.shopShow = false
      }
    },
  }
}

</script>
<style lang='scss'>
.home-search {
  @extend %wh100;
  display: flex;
  flex-direction: column;
  background-color: #eeeeee;
  box-sizing: border-box;
  padding-top: 0.6rem;
  .search-top {
    width: 100%;
    height: 0.88rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 0.3rem;
    color: #666666;
    font-size: 0.26rem;
    .van-icon {
      font-size: 0.36rem;
    }
    .van-search {
      flex: 1;
      .van-search__content {
        border: 1px solid #fe5112;
      }
    }
  }
  .search-history {
    flex: 1;
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0.6rem 0.38rem;
    .history-title {
      display: flex;
      justify-content: space-between;
      font-size: 0.28rem;
      span {
        &:first-child {
          color: #131415;
        }
        &:last-child {
          font-size: 0.26rem;
          color: #a7a7a7;
        }
      }
      .van-icon {
        font-size: 0.36rem;
        color: #a7a7a7;
      }
    }
    .history-item {
      margin: 0.3rem 0;
      display: flex;
      flex-wrap: wrap;
      span {
        padding: 0.15rem 0.25rem;
        background-color: #eeeeee;
        font-size: 0.28rem;
        color: #333333;
        margin: 0 0.1rem 0.25rem 0.1rem;
        border-radius: 0.5rem;
      }
    }
  }
  .sort-table {
    height: 0.8rem;
    background-color: #ffffff;
  }
  .shop-card {
    width: 7.3rem;
    height: 4.4rem;
    box-sizing: border-box;
    padding: 0 0.25rem 0.25rem;
    border-radius: 0.15rem;
    background-color: #ffffff;
    margin-top: 0.2rem;
    .shop-top {
      height: 35%;
      width: 100%;
      display: flex;
      .top-left {
        flex: 1;
        display: flex;
        align-items: center;
        img {
          width: 0.9rem;
          height: 0.9rem;
          border-radius: 0.5rem;
          margin-right: 0.25rem;
        }
        li {
          height: 80%;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          span {
            &:first-child {
              font-size: 0.3rem;
              color: #333333;
            }
            &:nth-child(2) {
              font-size: 0.24rem;
              color: #999999;
            }
            &:last-child {
              font-size: 0.24rem;
              color: #999999;
            }
          }
        }
      }
      .top-right {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        span {
          font-size: 0.26rem;
          width: 1.45rem;
          height: 0.5rem;
          line-height: 0.5rem;
          text-align: center;
          border-radius: 0.5rem;
          color: #666666;
          &:first-child {
            border: 1px solid #666666;
          }
          &:last-child {
            width: 1.25rem;
            background-color: #fe4d0d;
            color: #ffffff;
          }
        }
      }
    }
    .shop-bottom {
      height: 65%;
      width: 100%;
      display: flex;
    }
  }
  .search-result {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    background-color: #ffffff;
    .shop-result {
      background-color: #eeeeee;
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>